<template>
    <view class="video-player" :style="mescrollHeight">
        <view class="close" @click="onBack" :style="{ top: globStatusBarHeight + 'px' }">
            <u-icon name="close" color="#909399" size="34"></u-icon>
        </view>
        <video
            id="examVideoPlayer"
            class="video-wrapper"
            :src="src"
            :show-fullscreen-btn="false"
        ></video>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            videoContext: null,
            src: '',
        }
    },
    onLoad(option) {
        this.videoContext = uni.createVideoContext('examVideoPlayer', this)
        this.src = option.src
    },
    computed: {
        ...mapGetters({
            globStatusBarHeight: 'projectSetting/globStatusBarHeight',
        }),
        // 导航中间的标题的样式
        mescrollHeight() {
            console.log(this.$u.sys())
            let height = this.$u.sys().windowHeight
            let width = this.$u.sys().windowWidth
            return {
                width: width + 'px',
                height: height + 'px',
            }
        },
    },
    methods: {
        onBack() {
            this.videoContext.pause()
            this.$u.route({ type: 'back' })
        },
    },
}
</script>

<style lang="scss" scoped>
.video-player {
    display: flex;
    align-items: center;
    background-color: #000000;
    .close {
        position: absolute;
        padding: 15px;
    }
    .video-wrapper {
        width: 100%;
        height: 410rpx;
    }
}
</style>
